<template>
    <!-- 顶部导航 -->
    <HeaderNav/>
    <!-- 商铺主体 -->
    <!-- 主体内容 -->
    <div class="bg-indigo-900">
        <div class="container mx-auto pt-4 px-6 md:px-12">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="bg-white p-2 rounded-lg">
                        <el-image :src="logoUrl" class="w-12 h-12 object-cover" fit="cover" />
                    </div>
                    <div class="text-white flex items-center space-x-2">
                        <h1 class="text-4xl font-bold mb-2">{{ shopInfo.name }}</h1>
                        <div>
                            <div class="flex items-center space-x-2">
                                <span>{{ shopInfo.url }}</span>
                                <img :src="`/src/assets/image/level/s_${shopInfo.level}.png`" class="h-4" />
                                <!-- <div class="text-sm">【季洛霜】仅为该商户在本平台的简称</div> -->
                            </div>
                            <div class="flex items-center space-x-2 mt-1">
                                <span class="text-red-400 bg-black text-sm p-0.5 rounded"
                                    v-if="shopInfo.isManufacturer">生产厂家</span>
                                <span class="text-yellow-400 bg-black text-sm p-0.5 rounded">支持上门拿货</span>
                                <span class="text-yellow-400 bg-black text-sm p-0.5 rounded">营业执照</span>
                                <span class="text-red-400 bg-black text-sm p-0.5 rounded"
                                    v-if="shopInfo.isDropOne">支持一件代发</span>
                                <div class="text-sm bg-red-400 rounded-lg flex items-center justify-end">
                                    <img src="/src/assets/image/bond.png" />
                                    <div class="bg-white text-red-400 text-xs px-1 h-6 flex items-center rounded-r-lg">
                                        <span>已缴纳保障金2000元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-white text-end">
                    <div v-show="isShowPhone">
                        电话：<template v-for="(item, index) in shopInfo.phone">
                            {{ item }}&nbsp
                        </template>
                        微信：{{ shopInfo.wx }}
                    </div>
                    <button class="border text-gray-400 px-2 py-1 text-sm rounded-md"
                        @click="isShowPhone = !isShowPhone" v-show="!isShowPhone">
                        点击显示手机号/微信
                    </button>
                    <template v-for="(item, index) in shopInfo.address">
                        <p>拿货点{{index+1}}： {{item}}</p>
                        <!-- <p>拿货点： 万商红B41幢33-35号</p>
                        <p>拿货点2：万商红B41幢18-21号</p> -->
                    </template>
                    <p>
                        <!-- Q Q：704911693/854726981 -->
                        Q Q：<template v-for="(item, index) in shopInfo.qq">
                            {{ item }} &nbsp
                        </template>
                    </p>

                </div>
            </div>
            <!-- 二级导航 -->
            <div class="flex items-center justify-between mt-2 py-2">
                <div class="flex items-center space-x-1">
                    <template v-for="(item, index) in navItems" :key="index">
                        <button
                            :class="['  px-4 py-1',
    activeNavTabId == item.id ? 'bg-[#d7dafa] text-black' :'text-white bg-indigo-500  hover:bg-[#d7dafa]  hover:text-black']"
                            @click="handleNav(item)">
                            {{ item.name }}
                        </button>
                    </template>
                </div>
                <div class="flex items-center text-white">
                    <button
                        class="!rounded-button whitespace-nowrap border py-1 rounded text-sm w-24 hover:text-gray-400">
                        关注商家
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,  watch,onMounted,toRefs ,computed} from "vue";
import { useRoute } from 'vue-router';
import HeaderNav from "@/components/HeaderNav.vue";
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js"
const logoUrl ="https://ai-public.mastergo.com/ai/img_res/cb8f16f01f60bbff27ed2d5c641e6c1f.jpg";

const route = useRoute();
const navItems  = ref([
    {id:1, name: "商家首页",  },
    {id:2, name: "今日上新",  },
    {id:3, name: "已下架",  },
    {id:4, name: "商家动态",  },
]);
const isShowPhone=ref(false)
const  props = defineProps({
    activeNavTab:{
        type:String,
        default:'商家首页'
    }
})

//活跃的标签名
const {activeNavTab} = toRefs(props)
//自定义事件
const emit  = defineEmits(['catUpdate','changeNavTab'])
//活跃的标签id 
const activeNavTabId = ref(1)

watch(activeNavTab, (newVal, oldVal) => {
    console.log(newVal, oldVal, '111');
    activeNavTabId.value = navItems.value.find(item => item.name == activeNavTab.value).id
})
//商家信息
const shopInfo = ref(localStorage.getItem("shopInfo")?JSON.parse(localStorage.getItem("shopInfo")):{})
//获取商家信息 
const  getShopInfo=async()=>{
    await loadLocalJson("json/merchant/merchant.json").then((res) => {
       shopInfo.value = res.data
       localStorage.setItem('shopInfo',JSON.stringify(shopInfo.value))
    });
}
onMounted(async()=>{
    //获取商家的id
    const {shopId} = route.params
    //获取商家信息
    await getShopInfo()
    // console.log(shopInfo.value,'shopInfo.value');
    // 
})
const handleNav= (item) => {
    // console.log('点击了',item.name);
    activeNavTabId.value=item.id
    emit('changeNavTab',item.name)
    if(item.name==='商家动态'){
        emit('catUpdate', true)
    }
    
}
</script >
<style lang="less" scoped>
</style>